import { useState, useEffect } from 'react'
import CreateIngredientForm from '../hp/ingredients/create-ingredient-form/CreateIngredientForm.jsx'
import { IngredientService } from '../../../services/ingredient.service.js';
import style from './Home.module.css'
import IngredientItem from '../hp/ingredients/ingredient-item/IngredientItem';

const Home = () => {
  
  const [ingredients, setIngredients] = useState([]);


  useEffect(() => {
    const fetchData = async () => {
      const data = await IngredientService.getAll();
      setIngredients(data);
    }
    
    fetchData();
  }, []);

  return (
    <>
      <div><CreateIngredientForm setIngredients={setIngredients} /></div>
      <div className={style.parentContainer}>
        {ingredients.length ? (
          ingredients.map(item => (<IngredientItem key={item.id} ingredient={item} />)
          ))
        : (<p>There are no ingredients</p>)}
        </div>
    </>
  )
}

export default Home;
